<template>
  <div class="qu-wrapper">
    <div class="content">
      <div class="bg"></div>
      <div class="z-11 relative truncate tracking-1px">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script lang="ts" name="QuWrapper" setup>
</script>

<style lang="scss" scoped>
.qu-wrapper {
  @apply relative flex items-end;
  user-select: none;

  &:active {
    .content {
      @apply relative text-white truncate;
      padding: 0 15px 0 15px;
      font-size: 11px;
      line-height: 25px;
      font-weight: 600;

      .bg {
        @apply absolute w-full h-full left-0 backdrop-filter backdrop-blur-10px;
        background: linear-gradient(0deg, rgba(77, 116, 255, 0.45), rgba(77, 116, 255, 0.45));
        box-shadow: inset 0px 0px 12px #4399FF;
        border-radius: 100px;
      }
    }
  }

  .content {
    @apply relative text-white truncate;
    padding: 0 15px 0 15px;
    font-size: 11px;
    line-height: 25px;

    .bg {
      @apply absolute w-full h-full left-0 backdrop-filter backdrop-blur-10px;
      border-radius: 100px;
      background: linear-gradient(90deg, rgba(70, 115, 238, 0.45) 0%, rgba(0, 0, 0, 0.0675) 100%);
    }
  }
}
</style>